<template>
  <div id="container">
    <el-row>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="formInline.user" placeholder="请输入要查询的关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        size="small"
        :data="tableDataPager"
        border
        :header-cell-style="tableHeaderColor"
        :cell-style = "cellContentStyle"
        style="width: 100%">
        <el-table-column
          fixed
          prop="uid"
          label="用户编号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="realName"
          label="姓名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="260">
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机"
          width="180">
        </el-table-column>
        <el-table-column
          prop="email"
          label="电子邮箱"
          width="160">
        </el-table-column>
        <el-table-column
          prop="birthday"
          label="出生日期"
          width="120">
        </el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          width="120">
        </el-table-column>
        <el-table-column
          prop="flag"
          label="用户状态"
          width="80">
          <template slot-scope="scope" >
            <div v-if="scope.row.flag" style="color:red">
              已禁用
            </div>
            <div v-else style="color: green">
              已启动
            </div>
          </template>

        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.uid)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="doUpdate(scope.row.uid)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

     <el-row>
       <el-col :span="12" :offset="6" style="margin-top: 10px;text-align: center">
         <el-pagination
           :current-page.sync="currentPage"
           background
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :page-size="pageSize"
           :pager-count="15"
           layout="prev, pager, next"
           :total="tableData.length">
         </el-pagination>
       </el-col>
     </el-row>

    </el-row>

  </div>
</template>

<script>
export default {
  name: "list",
  data() {
    return {
      formInline: {},
      pageSize: 8,   //每页的记录数
      currentPage: 1, //当前的页号，
      /*
      tableData: [{
        uid: 24,
        realName: '王大锤',
        username: '8b867b9a37854b40bf07d3e4f0eb684',
        mobile: '13991838732',
        email: '403353606@qq.com',
        birthday: '2002-03-22',
        gender: '男',
        flag: 0
      },
        {
          uid: 24,
          realName: '王大锤',
          username: '8b867b9a37854b40bf07d3e4f0eb684',
          mobile: '13991838732',
          email: '403353606@qq.com',
          birthday: '2002-03-22',
          gender: '男',
          flag: 0
        },
        {
          uid: 24,
          realName: '王大锤',
          username: '8b867b9a37854b40bf07d3e4f0eb684',
          mobile: '13991838732',
          email: '403353606@qq.com',
          birthday: '2002-03-22',
          gender: '男',
          flag: 0
        },
        {
          uid: 24,
          realName: '王大锤',
          username: '8b867b9a37854b40bf07d3e4f0eb684',
          mobile: '13991838732',
          email: '403353606@qq.com',
          birthday: '2002-03-22',
          gender: '男',
          flag: 0
        },
        {
          uid: 24,
          realName: '王大锤',
          username: '8b867b9a37854b40bf07d3e4f0eb684',
          mobile: '13991838732',
          email: '403353606@qq.com',
          birthday: '2002-03-22',
          gender: '男',
          flag: 0
        },
        {
          uid: 24,
          realName: '王大锤',
          username: '8b867b9a37854b40bf07d3e4f0eb684',
          mobile: '13991838732',
          email: '403353606@qq.com',
          birthday: '2002-03-22',
          gender: '男',
          flag: 0
        },
        {
          uid: 24,
          realName: '王大锤',
          username: '8b867b9a37854b40bf07d3e4f0eb684',
          mobile: '13991838732',
          email: '403353606@qq.com',
          birthday: '2002-03-22',
          gender: '男',
          flag: 0
        },
        {
          uid: 24,
          realName: '王大锤',
          username: '8b867b9a37854b40bf07d3e4f0eb684',
          mobile: '13991838732',
          email: '403353606@qq.com',
          birthday: '2002-03-22',
          gender: '男',
          flag: 0
        },
        {
          uid: 24,
          realName: '王大锤',
          username: '8b867b9a37854b40bf07d3e4f0eb684',
          mobile: '13991838732',
          email: '403353606@qq.com',
          birthday: '2002-03-22',
          gender: '男',
          flag: 0
        },
        {
          uid: 24,
          realName: '王大锤',
          username: '8b867b9a37854b40bf07d3e4f0eb684',
          mobile: '13991838732',
          email: '403353606@qq.com',
          birthday: '2002-03-22',
          gender: '男',
          flag: 0
        }
      ]*/

      tableData:[]
    }
  },
  computed: {
    tableDataPager: function () {
      return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    },
  },
  mounted() {
    this.initUserList();
  },
  methods: {
    initUserList(){
      this.$store.dispatch('user/queryAllUserList').then(resp=>{
        if(resp.code === 200){
          this.tableData = resp.data;
          console.log("---------初始化用户列表集合-----------");
          console.log(this.tableData);
        }
      })
    },

    tableHeaderColor ({row, column, rowIndex, columnIndex}) {
      return 'text-align: center;color: #426ab3'
    },
    cellContentStyle({row, column, rowIndex, columnIndex}){
      return "text-align: center;"
    },
    handleSizeChange: function (size) {
      this.pageSize = size;
      //console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      //console.log(this.currentPage)  //点击第几页
    },
    doSearch() {
      console.log('查询....')
    },
    doUpdate(uid){
      //console.log(row);
      this.$router.push({ path: `/usermanager/update?uid=`+uid })
    },
    handleClick(uid){
      this.$router.push({ path: `/usermanager/details?uid=`+uid })
    }
  }
}
</script>

<style scoped>
#container {
  margin: 20px 10px;
  padding-right: 20px;
}

.demo-form-inline {
  text-align: center;
}
</style>
